<script setup>
import { useTemplateRef } from 'vue'

/** 暴露函数 */

defineExpose({
  removeAnimate,
  addAnimate,
})

/** 动画 */

const ani001 = useTemplateRef('ani-001')
const ani002 = useTemplateRef('ani-002')

function removeAnimate() {
  // 移除所有动画类
  ani001.value.classList.remove('animate__backInUp')
  ani002.value.classList.remove('sealAnimation')
}

function addAnimate() {
  // 添加动画类
  // 下一帧重新添加动画类
  requestAnimationFrame(() => {
    ani001.value.classList.add('animate__backInUp')
    ani002.value.classList.add('sealAnimation')
  })
}
</script>
<template>
  <div class="box">
    <p id="title" class="animate__animated" ref="ani-001">书<br />法<br />社</p>
    <div class="pic">
      <img src="@/assets/image/page5-pic1.jpg" style="width: 6rem" />
      <img src="@/assets/image/page5-pic2.jpg" style="width: 6rem" />
    </div>
    <img
      id="seal"
      class="animate__animated"
      src="@/assets/image/seal.png"
      style="width: 1.5rem"
      ref="ani-002"
    />
  </div>
</template>
<style scoped>
.box {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box #title {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  font-weight: bold;
  font-family: 'wangxizhi';
}

.box #seal {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}

.sealAnimation {
  animation: sealAnimation 2s ease-out forwards;
}

.box .pic img {
  display: block;
  margin-bottom: 0.5rem;
  border: 10px solid #fff;
}

.box .pic img:nth-of-type(1) {
  transform: translateX(-1rem) rotate(-10deg);
  animation: sway1 3s ease-in-out infinite;
}

.box .pic img:nth-of-type(2) {
  transform: translate(0.5rem, 1rem) rotate(10deg);
  animation: sway2 3s ease-in-out infinite;
}

@keyframes sway1 {
  0%,
  100% {
    transform: translateX(-1rem) rotate(-10deg);
  }
  50% {
    transform: translateX(-1.5rem) rotate(-10deg);
  }
}

@keyframes sway2 {
  0%,
  100% {
    transform: translate(0.5rem, 1rem) rotate(10deg);
  }
  50% {
    transform: translate(1rem, 1rem) rotate(10deg);
  }
}

@keyframes sealAnimation {
  0% {
    transform: scale(3);
    opacity: 0;
  }
  50% {
    transform: scale(2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
